<template>
    <el-sub-menu v-if="hasChildren" :index="itemConfig.path">
        <template #title>
            <el-icon>
                <Folder />
            </el-icon>
            <span>{{ itemConfig.meta.title }}</span>
        </template>
        <SubMenu
            v-for="item in itemConfig.children"
            :key="item.path"
            :itemConfig="item"
        ></SubMenu>
    </el-sub-menu>
    <el-menu-item v-else :index="itemConfig.path">
        <el-icon>
            <Document />
        </el-icon>
        <template #title>
            <span>{{ itemConfig.meta.title }}</span>
        </template>
    </el-menu-item>
</template>

<script setup>
    import { ElMenuItem, ElSubMenu, ElIcon } from "element-plus";
    import { Folder, Document } from "@element-plus/icons-vue";
    import { computed } from "vue";
    import { useStore } from "vuex";
    const props = defineProps({
        itemConfig: {
            type: Object,
            default: () => ({}),
        },
    });
    const store = useStore();
    const hasChildren = computed(() => {
        return props.itemConfig.children && props.itemConfig.children.length;
    });
    // const handleClick = (val) => {
    //     let obj = {
    //         title: val.meta.title,
    //         path: val.path
    //     }
    //     store.commit('setActiveMenu', obj)
    // }
</script>

<style lang="scss" scoped></style>
